<template>
  <el-container class="home-container">
    <!--头部区域-->
    <el-header>
      <div>
        <span>关于我</span><a href="">你不知道的事</a>
      </div>
    </el-header>
    <el-container>
      <el-aside>
        <div>
          <img src="../assets/图层 1.png" alt="还可以吧？" class="photo">
          <h1>骆陈</h1>
          <el-tooltip content="点击切换" placement="top" :enterable="false">
            <img src="../assets/下拉.png" alt="点击有更多" class="aside_more" @click="isCollapse = !isCollapse">
          </el-tooltip>
        </div>
        <div v-show="isCollapse" class="my_info">
          <span>
            <h3><i class="iconfont icongongzuo" /> 求职意向：web前端</h3>
          </span>
          <span>
            <h3><i class="iconfont iconedu-line" />学历：大专</h3>
          </span>
          <span>
            <h3><i class="iconfont iconxuexiao" />学校：成都航空职业技术学院</h3>
          </span>
          <span>
            <h3><i class="iconfont iconnianling" />年龄：25岁</h3>
          </span>
          <span>
            <h3><i class="iconfont iconshoujihao" />电话号码：18848371432</h3>
          </span>
          <span>
            <h3><i class="iconfont iconyouxiang" />微信号：lc877699032</h3>
          </span>
          <a href="https://gitee.com/luo_chen_xt/Myself" ><h4>+查看源码</h4></a>
        </div>
        <div v-show="!isCollapse" class="my_info_txt">
          <span>
            <h2>个人简介</h2><br>
            <b>本人有着较强的沟通表达能力和学<br>习能力。
              对工作有上进心、认真负责<br>、待人真诚、处人随和！换位思考<br>有自己独特的想法这是我最大的优<br>点，并且我多才多艺，对于新的事
              物<br>一直在学习，有自学过素描和PS，在<br>大学的时候就可以用这些技能赚取报<br>酬，在后面的工作中也能想出很多有<br>
              新意的想法来提升区域的工作效率，<br>提出一些新颖的思路来优化工作</b>
          </span>
        </div>
      </el-aside>
      <!--主题区域-->
      <el-main>
        <!--卡片视图-->
        <el-card style="height: 99%;margin-right: 100px;box-shadow: 2px 5px 10px black;">
          <el-row>
            <!--第一部分-->
            <el-col :span="15">
              <template>
                <h4>项目经历</h4>
                <el-carousel ref="carousel" indicator-position="inside" interval="4000" @change="changeText">
                  <el-carousel-item v-for="(item ,index) in imgData" :key="index" name="index">
                    <div class="text">
                      <img :src="item.src" alt="">
                      <div class="text1">
                        <p>{{ item.txt1 }}</p>
                      </div>
                    </div>
                  </el-carousel-item>
                </el-carousel>
              </template>
            </el-col>
            <!--第二部分-->
            <el-col :span="9">
              <h4>项目介绍</h4>
              <el-card style="height:300px">
                <template>
                  <el-table v-show="index==0? true:false" :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="date" width="120" />
                    <el-table-column prop="name" width="250" />
                  </el-table>
                </template>
                <template>
                  <el-table v-show="index == 1 ? true:false" :data="tableData1" stripe style="width: 100%">
                    <el-table-column prop="date" width="120" />
                    <el-table-column prop="name" width="250" />
                  </el-table>
                </template>
                <template>
                  <el-table v-show="index == 2 ? true:false" :data="tableData2" stripe style="width: 100%">
                    <el-table-column prop="date" width="120" />
                    <el-table-column prop="name" width="250" />
                  </el-table>
                </template>
                <template>
                  <el-table v-show="index == 3 ? true:false" :data="tableData3" stripe style="width: 100%">
                    <el-table-column prop="date" width="120" />
                    <el-table-column prop="name" width="250" />
                  </el-table>
                </template>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <!--第三部分-->
            <el-col :span="12">
              <div class="block">
                <h4>工作经历</h4>
                <el-timeline>
                  <el-timeline-item placement="top" color="#555555" size="large">
                    <h5>2018/08/01</h5>
                    <el-card>
                      <h4>入职厦门星豆餐饮</h4>
                      <p>担任门店主管</p>
                      <p>负责门市运营，叫货收货，投诉处理，培训教学,账单管理</p>
                    </el-card>
                    
                  </el-timeline-item>
                  <el-timeline-item placement="top" color="#555555">
                   <h5>2020/02/027</h5>
                   <el-card>
                     <h4>入职千正科技</h4>
                     <p>担任web前端开发</p>
                     <p>负责一些UI设计，页面布局，使用原生js完成动态页面以及交互功能</p>
                   </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-col>
            <!--第四部分-->
            <el-col :span="12">
              <h4>未来规划</h4>
              <el-card class="fourCard">
                <button type="primary" style="margin: 200px auto 10px;" @click="drawer = true" class="btn one">
                  点我看看
                </button>

                <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
                  <span>
                    <h1>这是我的一些画</h1>
                  </span>
                  <div class="demo-image__lazy">
                    <el-image v-for="url in urls" :key="url" :src="url" :preview-src-list="srcList" :fit="scale-down"
                      style="width: 200px;" />
                  </div>
                  <h6>看不清还可以点开看哦</h6>
                </el-drawer>
                <p><b>短期的目标</b>:每天会有定时定量的阅读习惯，先看一些JS书籍:<br>JavaScript权威指南</p>
                <p>
                  <b>长远的目标</b>:随时更新自己的技术，另外根据自己的美术基础以<br>及设计基础，使用鼠绘板来设计logo、icon和一些插画可以用<br>
                  ，因为有时候会有一些想法和灵感，只有自己才能把自己想象中<br>的画面最好的给表达出来
                </p>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <draggable >
          <button type="primary" class="main_get btn two" @click="getHim" >选他</button>
        </draggable>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import draggable from 'vuedraggable';
  export default {
    data() {
      return {
        isCollapse: true,
        imgData: [{
            src: require('../assets/pro01.png'),
            txt1: '电商后台管理系统',
            txt2: '运用VUE框架，',
            txt3: ''
          },
          {
            src: require('../assets/pro02.png')
          },
          {
            src: require('../assets/pro03.png')
          },
          {
            src: require('../assets/pro4.png')
          }
        ],
        tableData1: [{
          date: '网易云音乐'
        }, {
          date: '框架与技术',
          name: 'VUE.js  Router  VUEX '
        }, {
          date: '功能',
          name: '歌曲播放、搜索功能，'
        }, {
          date: '负责的内容',
          name: '完成整体页面布局以及路由结构，实现播放的进度条、暂停等效果'
        }, {
          date: '码云地址',
          name: 'https://gitee.com/luo_chen_xt/music_player'
        }],
        tableData: [{
          date: '电商管理系统'
        }, {
          date: '框架与技术',
          name: 'VUE.js Router ElementUI'
        }, {
          date: '功能',
          name: '管理用户、管理商品、分配权限'
        }, {
          date: '负责的内容',
          name: '登陆页面，页面布局，用户的增删改'
        }, {
          date: '码云地址',
          name: 'https://gitee.com/luo_chen_xt/vue_shop'
        }],
        tableData2: [{
          date: '小米商城'
        }, {
          date: '框架与技术',
          name: 'gulp JS jQuery'
        }, {
          date: '功能',
          name: '展示商品，图片轮播，移入显示下拉菜单'
        }, {
          date: '负责的内容',
          name: '主页banner图效果，侧边导航'
        }],
        tableData3: [{
          date: '打砖块游戏'
        }, {
          date: '框架与技术',
          name: 'JS'
        }, {
          date: '功能',
          name: '小球碰撞砖块消失，没有接到游戏失败'
        }, {
          date: '收获',
          name: '运用拖拽和运动，使用基本逻辑来实现有趣味的效果'
        }],
        index: 0,
        drawer: false,
        urls: [
          require('../assets/pic01.jpg'),
          require('../assets/pic02.jpg'),
          require('../assets/pic03.jpg'),
          require('../assets/pic04.jpg')
        ],
        srcList: [
          require('../assets/pic01.jpg'),
          require('../assets/pic02.jpg'),
          require('../assets/pic03.jpg'),
          require('../assets/pic04.jpg')
        ]
      }
    },
    components:{
      draggable
    },
    created() {},
    methods: {
      changeText(index) {
        this.index = index
      },
      getHim() {
        this.$router.push('/gethim')
      },

    }
  }
</script>

<style lang="less" scoped>
  .home-container {
    height: 100%;
  }

  .photo:hover {
    margin-top: 20px;
    transform: scale(1.1);
    transition-duration: 1s;
    box-shadow: 0px 0px 15px 3px dodgerblue;
  }

  .el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    color: #fff;
    font-size: 30px;
    background-image: linear-gradient(to right, #222222, #655555, #488888);

    >div {
      display: flex;
      align-items: center;

      span {
        margin-left: 15px;
      }
      a {font-size: 18px;margin-top: 8px;margin-left: 1650px;color: #DD4A68;font-weight: bold;opacity: 1;}
    }
  }
  .el-header:hover a{opacity: 1;transform: translateX(-1640px);transition-duration: 3s;color: white;}

  .el-aside {
    background-color: darkgrey;
    background-image: linear-gradient(#eeeeee, #70aacc, #9198e5, );
    box-shadow: 0px 10px 100px 6px skyblue;
    height: 100%;
    width: 300px;
    margin-left: 100px;

    >div {
      color: black;

      .photo {
        border: 10px solid dimgrey;
        border-radius: 50%;
        margin-top: 20px;
      }

      h1 {
        font-size: 25px,
      }

      .aside_more {
        width: 40px;
        height: 20px;
        border: 2px solid #333333;
        border-radius: 20%;
        padding: 5px;
      }
    }
  }
  .aside_more:hover {
      transform: translateY(-2px);
      box-shadow: 0px 0px 7px 2px black;
  }

  .my_info {
    text-align: left;
    margin-left: 30px;
  }

  .iconfont {
    margin-right: 10px;
    font-size: 30px;
    margin-left: -20px;
  }

  .el-main {
    background-color: white;
    background-image: linear-gradient(to right, #eeeeee, #999999);
    position: relative;
  }

  .el-col {
    background-color: darkgrey;
    height: 400px;
    padding: 30px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 350px;
    margin: 0;

  }

  .el-carousel {
    height: 350px;

    img {
      width: 560px;
      height: 294px;
      border-radius: 10px;
      border: 3px solid lightblue;
    }

    ;

    span {
      margin-top: 330px;
    }
  }

  .text1 {
    z-index: 100;
  }

  .el-table {
    margin-top: -40px;
  }

  .block {
    margin-top: 10px;
  }

  .block h5 {
    margin-top: -8px;
  }

  .block h4 {
    margin-top: -5px;
  }

  .block p {
    margin-bottom: -10px;
    color: black;
  }

  .el-card:hover {
    box-shadow: 4px 2px 10px black;
  }

  .fourCard button {
    float: right;
  }

  .my_info_txt {
    line-height: 30px;
  }

  .main_get {
    position: absolute;left: 1400px;top: 810px;
  }
  .my_info span:hover{color: springgreen;}
  .btn {
    box-sizing: border-box;
  border: 1px solid;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 300;
}

.one {
  color: #4cc9f0;
}
.two {
  color: #f038ff;
}
.one:hover {
  background-color: #4cc9f0;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
}
.two:hover {
  background-color: #f038ff;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}
.btn:hover {
  color: white;
}
</style>
